1<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="个人作品集网站">
    <title>我的个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">我的作品集 / My Portfolio</div>
            <div class="nav-container">
                <ul class="nav-links">
                    <li><a href="#home" data-zh="首页" data-en="Home">首页</a></li>
                    <li><a href="#introduction" data-zh="介绍" data-en="Introduction">介绍</a></li>
                    <li><a href="#about" data-zh="关于我" data-en="About Me">关于我</a></li>
                    <li><a href="#projects" data-zh="项目" data-en="Projects">项目</a></li>
                    <li><a href="#contact" data-zh="联系我" data-en="Contact">联系我</a></li>
                </ul>
                <div class="nav-controls">
                    <div class="theme-switcher">
                        <button id="theme-btn" class="theme-btn" aria-label="切换主题">
                            <span class="theme-icon">🌙</span>
                        </button>
                    </div>
                    <div class="language-switcher">
                        <button id="lang-btn" class="lang-btn">中 / EN</button>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1 data-zh="欢迎来到我的作品集" data-en="Welcome to My Portfolio">欢迎来到我的作品集</h1>
                <p data-zh="我是[LePing-Chang]，一名[学生]" data-en="I'm [LePing-Chang], a [student]">我是[LePing-Chang]，一名[学生]</p>
                <button id="cta-button" data-zh="了解更多" data-en="Learn More">了解更多</button>
            </div>
        </section>

        <!-- 个人介绍部分 -->
        <section id="introduction" class="introduction">
            <div class="intro-container">
                <div class="profile-picture">
                    <!-- Profile picture of Arknights Thorn character -->
                    <!-- To add a profile image, download a preferred image of the Arknights Thorn character -->
                    <!-- and save it as "thorn-profile.jpg" in the images folder -->
                    <img src="images/20201201185918_9232d.jpg" alt="Profile Picture" id="profile-img" onerror="this.src='images/default-profile.png';">
                </div>
                <div class="intro-text">
                    <h2 data-zh="个人介绍" data-en="Introduction">个人介绍</h2>
                    <p data-zh="你好！我是LePing-Chang，一名热爱技术和游戏的开发者。就像明日方舟中的棘刺一样，我追求卓越，不断突破自己的极限。" data-en="Hello! I'm LePing-Chang, a developer who loves technology and games. Just like Thorn in Arknights, I pursue excellence and constantly push my limits.">你好！我是LePing-Chang，一名热爱技术和游戏的开发者。就像明日方舟中的棘刺一样，我追求卓越，不断突破自己的极限。</p>
                    <p data-zh="我专注于[将无人机与计算机专业结合]，具有[无人机执照]等方面的技能。在工作中，我始终保持认真负责的态度，力求在每个项目中都能达到最佳效果。" data-en="I focus on [combining drones with computer science], with skills such as [drone license]. At work, I always maintain a serious and responsible attitude, striving for the best results in every project.">我专注于[将无人机与计算机专业结合]，具有[无人机执照]等方面的技能。在工作中，我始终保持认真负责的态度，力求在每个项目中都能达到最佳效果。</p>
                    <p data-zh="除了技术工作，我还是一个游戏爱好者，特别喜欢像明日方舟这样的策略游戏。棘刺的坚韧和决心一直激励着我在工作和生活中不断前进。" data-en="In addition to technical work, I am also a gaming enthusiast, especially strategy games like Arknights. Thorn's perseverance and determination have always inspired me to keep moving forward in my work and life.">除了技术工作，我还是一个游戏爱好者，特别喜欢像明日方舟这样的策略游戏。棘刺的坚韧和决心一直激励着我在工作和生活中不断前进。</p>
                </div>
            </div>
        </section>

        <section id="about" class="about">
            <h2 data-zh="关于我" data-en="About Me">关于我</h2>
            
            <!-- 个人简介 -->
            <div class="about-content">
                <div class="about-intro">
                    <h3 data-zh="个人简介" data-en="Personal Introduction">个人简介</h3>
                    <p data-zh="我是一名Python Developer，擅长消息中间件、实时数据处理和高可用架构设计。我对技术充满热情，喜欢探索新的编程语言和框架，特别是Rust语言。在工作之余，我喜欢幸运星、孤独摇滚和摇曳露营等动漫作品，这些作品给了我很多灵感和动力。" data-en="I am a Python Developer specializing in message middleware, real-time data processing, and high-availability architecture design. I am passionate about technology and love exploring new programming languages and frameworks, especially Rust. In my spare time, I enjoy anime works like Lucky Star, Bocchi the Rock!, and Yuru Camp, which have given me a lot of inspiration and motivation.">我是一名Python Developer，擅长消息中间件、实时数据处理和高可用架构设计。我对技术充满热情，喜欢探索新的编程语言和框架，特别是Rust语言。在工作之余，我喜欢幸运星、孤独摇滚和摇曳露营等动漫作品，这些作品给了我很多灵感和动力。</p>
                </div>
                
                <!-- 技能标签 -->
                <div class="skills-section">
                    <h3 data-zh="技能标签" data-en="Skills">技能标签</h3>
                    <div class="skills-container">
                        <div class="skill-category">
                            <h4 data-zh="精通" data-en="Expert">精通</h4>
                            <div class="skill-tags">
                                <span class="skill-tag python">Python</span>
                                <span class="skill-tag mongodb">MongoDB</span>
                            </div>
                        </div>
                        <div class="skill-category">
                            <h4 data-zh="熟练" data-en="Proficient">熟练</h4>
                            <div class="skill-tags">
                                <span class="skill-tag nextjs">Next.js</span>
                                <span class="skill-tag elasticsearch">ElasticSearch</span>
                            </div>
                        </div>
                        <div class="skill-category">
                            <h4 data-zh="学习中" data-en="Learning">学习中</h4>
                            <div class="skill-tags">
                                <span class="skill-tag rust">Rust</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 专业经历时间线 -->
                <div class="timeline-section">
                    <h3 data-zh="专业经历" data-en="Professional Experience">专业经历</h3>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">2021-2023</div>
                            <div class="timeline-content">
                                <h4>OpenAI</h4>
                                <p data-zh="软件工程师" data-en="Software Engineer">软件工程师</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">2017-2020</div>
                            <div class="timeline-content">
                                <h4>Google</h4>
                                <p data-zh="软件工程师" data-en="Software Engineer">软件工程师</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">2014-2016</div>
                            <div class="timeline-content">
                                <h4 data-zh="斯坦福大学" data-en="Stanford University">斯坦福大学</h4>
                                <p data-zh="硕士" data-en="Master">硕士</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">2010-2014</div>
                            <div class="timeline-content">
                                <h4 data-zh="清华大学" data-en="Tsinghua University">清华大学</h4>
                                <p data-zh="本科" data-en="Bachelor">本科</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 个人成就 -->
                <div class="achievements-section">
                    <h3 data-zh="个人成就" data-en="Achievements">个人成就</h3>
                    <div class="achievements-grid">
                        <div class="achievement-item">
                            <div class="achievement-icon">🏆</div>
                            <h4 data-zh="清华大学优秀毕业生" data-en="Outstanding Graduate of Tsinghua University">清华大学优秀毕业生</h4>
                        </div>
                        <div class="achievement-item">
                            <div class="achievement-icon">🌟</div>
                            <h4 data-zh="微软MVP" data-en="Microsoft MVP">微软MVP</h4>
                        </div>
                        <div class="achievement-item">
                            <div class="achievement-icon">📜</div>
                            <h4 data-zh="华为开发者认证" data-en="Huawei Developer Certification">华为开发者认证</h4>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="projects">
            <h2 data-zh="我的项目" data-en="My Projects">我的项目</h2>
            <div class="project-grid">
                <div class="project-card">
                    <img src="images/project1.jpg" alt="项目1">
                    <h3 data-zh="项目1" data-en="Project 1">项目1</h3>
                    <p data-zh="项目描述" data-en="Project Description">项目描述</p>
                </div>
                <div class="project-card">
                    <img src="images/project2.jpg" alt="项目2">
                    <h3 data-zh="项目2" data-en="Project 2">项目2</h3>
                    <p data-zh="项目描述" data-en="Project Description">项目描述</p>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <h2 data-zh="联系我" data-en="Contact Me">联系我</h2>
            
            <!-- 联系表单 -->
            <div class="contact-container">
                <div class="contact-form-section">
                    <h3 data-zh="发送消息" data-en="Send Message">发送消息</h3>
                    <form id="contact-form">
                        <div class="form-group">
                            <label for="name" data-zh="姓名" data-en="Name">姓名</label>
                            <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
                        </div>
                        <div class="form-group">
                            <label for="email" data-zh="邮箱" data-en="Email">邮箱</label>
                            <input type="email" id="email" name="email" placeholder="请输入您的邮箱" required>
                        </div>
                        <div class="form-group">
                            <label for="message" data-zh="留言" data-en="Message">留言</label>
                            <textarea id="message" name="message" placeholder="请输入您的留言内容" required></textarea>
                        </div>
                        <button type="submit" class="submit-btn" data-zh="发送消息" data-en="Send Message">发送消息</button>
                    </form>
                </div>
                
                <!-- 社交媒体链接 -->
                <div class="social-links-section">
                    <h3 data-zh="其他联系方式" data-en="Other Contact Methods">其他联系方式</h3>
                    <div class="social-links">
                        <a href="https://kirineko.github.io" target="_blank" rel="noopener noreferrer" class="social-link">
                            <div class="social-icon">🌐</div>
                            <div class="social-info">
                                <h4 data-zh="个人网页" data-en="Personal Website">个人网页</h4>
                                <p>https://kirineko.github.io</p>
                            </div>
                        </a>
                        <a href="mailto:3273442740@qq.com" class="social-link">
                            <div class="social-icon">📧</div>
                            <div class="social-info">
                                <h4 data-zh="邮箱" data-en="Email">邮箱</h4>
                                <p>3273442740@qq.com</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p data-zh="&copy; 2025 我的作品集. 保留所有权利." data-en="&copy; 2025 My Portfolio. All rights reserved.">&copy; 2025 我的作品集. 保留所有权利.</p>
    </footer>

    <script src="main.js"></script>
</body>
</html>
